<template>
  <div class="setting">
    <div class="setting-header">设置</div>
    <el-form :model="userInfo" :rules="rules" ref="settingForm" label-position="top">
      <el-form-item label="头像">
        <file-upload class="avatar-uploader" :action="imageAction" :showLoading="true" :maxSize="maxSize" @success="onUploadSuccess" :fileTypes="['image/jpeg', 'image/png', 'image/jpg','image/webp']">
          <img v-if="userInfo.headImage" :src="userInfo.headImage" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </file-upload>
      </el-form-item>
      <div class="form-row">
        <el-form-item label="用户名" class="form-item">
          <el-input disabled v-model="userInfo.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="nickName" label="昵称" class="form-item">
          <el-input v-model="userInfo.nickName" autocomplete="off"></el-input>
        </el-form-item>
      </div>

      <el-form-item label="个性签名">
        <el-input type="textarea" v-model="userInfo.signature"></el-input>
      </el-form-item>
      <div class="form-row">
        <el-form-item label="性别">
          <el-radio-group v-model="userInfo.sex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="字号">
          <el-radio-group v-model="userInfo.zt">
            <!-- <el-radio label="14">小号</el-radio>
          <el-radio label="16">中号</el-radio>
          <el-radio label="18">大号</el-radio>
          <el-radio label="20">最大号</el-radio> -->
            <el-radio-button label="14">小号</el-radio-button>
            <el-radio-button label="16">中号</el-radio-button>
            <el-radio-button label="18">大号</el-radio-button>
            <el-radio-button label="20">超大号</el-radio-button>
          </el-radio-group>
        </el-form-item>

      </div>

    </el-form>
    <div class="footer">
      <!-- <el-button @click="onClose()">取 消</el-button> -->
      <el-button type="primary" icon="el-icon-check" @click="onSubmit()">确 定</el-button>
    </div>
  </div>

</template>

<script>
import FileUpload from '@/components/common/FileUpload.vue'

export default {
  name: 'setting',
  components: {
    FileUpload
  },
  data() {
    return {
      userInfo: {
        zt: '16'
      },
      maxSize: 5 * 1024 * 1024,
      action: '/image/upload',
      rules: {
        nickName: [
          {
            required: true,
            message: '请输入昵称',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    onClose() {
      this.$emit('close')
    },
    onSubmit() {
      this.$refs['settingForm'].validate(valid => {
        if (!valid) {
          return false
        }
        this.$http({
          url: '/user/update',
          method: 'put',
          data: this.userInfo
        }).then(() => {
          this.$store.commit('setUserInfo', this.userInfo)
          this.$emit('close')
          this.$message.success('修改成功')
        })
      })
    },
    onUploadSuccess(data, file) {
      this.userInfo.headImage = data.originUrl
      this.userInfo.headImageThumb = data.thumbUrl
    }
  },
  props: {
    visible: {
      type: Boolean
    }
  },
  computed: {
    imageAction() {
      return `/image/upload`
    }
  },
  watch: {},
  created() {
    let mine = this.$store.state.userStore.userInfo
    const info = JSON.parse(JSON.stringify(mine))
    if (info.zt) {
      this.userInfo = info
    } else {
      this.userInfo = { ...info, ...this.userInfo }
    }

    console.log(this.userInfo)
  }
}
</script>

<style lang="scss" scoped>
.setting {
  background-color: #fff;
  height: 100%;
  text-align: left;
  .setting-header {
    padding-left: 20px;
    font-size: 20px;
    font-weight: 600;
    line-height: 50px;
    border-bottom: 1px solid #ddd;
  }
  .el-form {
    padding: 10px 30px 0;
    .el-form-item {
      margin-bottom: 10px;
      ::v-deep .el-input.is-disabled .el-input__inner {
        background-color: #e9f4ff;
        border: #86c2ff 1px solid !important;
      }
    }
  }
  .avatar-uploader {
    .el-upload {
      border: 1px dashed #d9d9d9 !important;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .el-upload:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }

    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
  }
}

.footer {
  background-color: #fff;
  position: absolute;
  right: 20px;
  bottom: 20px;
  // margin-right: 20px;
  display: flex;
  justify-content: flex-end;
}

.form-row {
  display: flex;
  justify-content: space-between;
}
.form-item {
  flex: 1;
  margin-right: 20px;
}
.form-item:last-child {
  margin-right: 0;
}
</style>

